<template>
  <div class="model__pop">
    <div
      v-for="item in modelsGroup"
      class="model__group"
      :class="{ is__vip: item.isVip }"
      :key="item.cat_id"
    >
      <div class="group__label" v-if="modelsGroup.length > 1">{{ item.name }}</div>

      <el-popover
        v-for="sub in item.list"
        popper-class="ai_model_item_pop"
        :key="sub.name"
        placement="right-start"
        :title="sub.name"
        width="260"
        trigger="hover"
        :disabled="!sub.desc">
        <div class="model_desc">
          {{ sub.desc }}
        </div>
        <div class="model_price" v-if="chatStore.modelsPriceMap[sub.fn_id]">
          <svg-icon icon-class="magic-star2" class="fs-20"></svg-icon>
          使用该模型{{ chatStore.modelsPriceMap[sub.fn_id].fn_num_text }}{{ chatStore.modelsPriceMap[sub.fn_id].fn_unit_name }}消耗：{{ chatStore.modelsPriceMap[sub.fn_id].price }}个{{ chatStore.modelsPriceMap[sub.fn_id].price_unit_name }}
        </div>
        <div
          slot="reference"
          class="model__item"
          :class="{ active: currentModel && sub.model === currentModel.model }"
          :key="sub.name"
          @click.stop="handleSelect(sub)"
        >
          <img v-if="sub.icon" :src="sub.icon" width="16" height="16" />
          <svg-icon v-else :icon-class="formatModelTypeIcon(sub.model) || ''"></svg-icon>
          <span>{{ sub.name }}</span>
          <svg-icon v-if="sub.thinking_enabled" icon-class="deep-think" class="deep__think_icon ml-a fs-16"></svg-icon>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { formatModelTypeIcon } from '@/utils'
import createChatDoc from '@/utils/chat-document'
const { handlePdfSummrize } = createChatDoc()

export default {
  name: 'Models',
  inject: ['resetNode'],
  components: {
  },
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters(['chatStore', 'userInfo', 'hasLogin']),
    isChatDocument () { return this.chatStore.docSummarize.status !== '' },
    // eslint-disable-next-line
    modelsGroup () {
      if (this.isChatDocument) {
        const list = new Map()
        const type = this.chatStore.docSummarize.type === 'link' ? 'TEXT' : 'PDF'
        const models = this.chatStore.documentModels?.filter((v) => v.supported_file_type?.includes(type))
        models && models.forEach((item) => {
          if (list.has(item.group)) {
            list.get(item.group).list.push(item)
          } else {
            list.set(item.group, {
              name: item.group,
              cat_id: item.group,
              list: [item],
              isVip: item.is_must_vip
            })
          }
        })
        return [...list.values()]
      }
      const list = new Map()
      const models = this.chatStore.models
      if (process.env.VUE_APP_BUY_TYPE === 'right') {
        models.forEach((item) => {
          if (list.has(item.right_id)) list.get(item.right_id).list.push(item)
          else {
            list.set(item.right_id, {
              name: item.right_cat_name,
              cat_id: item.right_id,
              list: [item]
            })
          }
        })
        return [...list.values()]
      } else if (['token', 'energy'].includes(process.env.VUE_APP_BUY_TYPE)) {
        models.forEach((item) => {
          if (list.has(item.group)) list.get(item.group).list.push(item)
          else {
            list.set(item.group, {
              name: item.group,
              cat_id: item.group,
              list: [item]
            })
          }
        })
        return [...list.values()]
      }
      return []
    },
    currentModel () {
      return this.isChatDocument ? this.chatStore.currentDocumentModel : this.chatStore.currentModel
    }
  },
  methods: {
    formatModelTypeIcon,
    // eslint-disable-next-line sonarjs/cognitive-complexity
    handleSelect (model) {
      const target = model
      this.$store.dispatch('chat/setChatStore', { showModels: false })

      // const param = this.userInfo.userRights.find((v) => v.right_id === target?.right_id)
      // if (!this.userInfo.is_member && target?.is_must_vip && !param?.rest_limit && process.env.VUE_APP_NAME === 'xz') {
      //   this.$xz('HtmlClickReport', { ReportID: 7703 })
      //   this.$PsMessageBox({
      //     message: `该模型为VIP专享，马上开通享更多特权吧！`,
      //     title: '权益提示',
      //     confirmButtonText: '开通VIP',
      //     cancelButtonText: !this.hasLogin ? '会员登录' : '知道了',
      //     width: 312,
      //     beforeClose: (action, instance, done) => {
      //       if (action === 'confirm') {
      //         this.$gotoMember({
      //           'xz': () => {
      //             this.$xz('HtmlClickReport', { ReportID: 8503 })
      //             this.$xz('xz_set_stat_id', 8503)
      //           }
      //         })
      //       }
      //       if (action === 'cancel' && !this.hasLogin) {
      //         this.$gotoLogin()
      //       }
      //       done()
      //     }
      //   })
      //   return
      // }
      if (this.isChatDocument && this.chatStore.docSummarize.status !== 'error') {
        const doctype = this.chatStore.docSummarize.type
        if (doctype === 'link') {
          this.$PsMessageBox({
            title: '切换模型',
            message: '切换模型将会重新重新生成总结并扣取对应的权益次数',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            width: 312,
            beforeClose: (action, instance, done) => {
              if (action === 'confirm') {
                // eslint-disable-next-line sonarjs/no-duplicate-string
                this.$store.dispatch('chat/setCurrentModel', { model: target, type: 'doc' })
              }
              done()
            }
          })
          return
        }
        this.$store.dispatch('chat/setCurrentModel', { model: target, type: 'doc' })
        handlePdfSummrize()
        this.resetNode()
        return
      }
      this.$store.dispatch('chat/setCurrentModel', { model: target })
    }
  }
}
</script>
<style lang="scss" scoped>
.model__pop {
  max-height: 306px;
  overflow-y: auto;
}
.model__group {
  padding: 10px 0 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: #FFFFFF;
  &.is__vip {
    // background: linear-gradient(180deg, #fffbf2 0%, #fff0d3 100%);
    .group__label {
      color: rgba(123, 72, 1, 1);
    }
  }
  &:last-child {
    border-bottom: none;
  }
  &:first-child {
    padding-top: 0;
  }
}
.group__label {
  line-height: 1.32;
  margin-bottom: 4px;
  padding: 0 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}
.model__item {
  display: flex;
  font-size: $font-size-base;
  align-items: center;
  padding: 10px 20px;

  gap: 8px;
  cursor: pointer;
  .svg-icon,
  img {
    font-size: 16px;
    color: $color-white;
  }
  &:hover {
    background: rgba(255, 255, 255, 0.15);
  }
  &.active {
    color: $color-primary;
    line-height: 1;
  }
}
</style>
<style lang="scss">
.ai_model_item_pop {
  background: #262735;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  color: #FFFFFF;
  border-radius: 8px;
  font-size: 12px;
  padding: 20px;
  margin: 0 !important;
  .el-popover__title {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
  }
  .model_desc {
    opacity: .7;
  }
  .model_price {
    margin-top: 15px;
  }
}
</style>
